<!--
  聊天室头部组件
-->
<template>
  <div class="header">
    <div class="left">
      <el-icon><Fold /></el-icon>
      <div class="userImg">
        <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
      </div>
    </div>
    <div class="right">
      <el-icon><FullScreen /></el-icon>
      <el-icon><Bell /></el-icon>
      <el-icon><CloseBold /></el-icon>
    </div>
  </div>
</template>

<script lang='ts' setup>

</script>

<style lang="scss" scoped>
.header { // 设置大体的头部样式
  width: 100%;
  height: 60px;
  background-color: rgba(149,225,235,.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px 0;
  // 设置默认字体图标样式
  .el-icon {
    font-size: 20px;
  }
  // 左侧收缩按钮与头像
  .left {
    display: flex;
    align-items: center;
    // 用户头像
    .userImg {
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-left: 20px;
      }
    }
  }
  // 左侧图标操作栏区域
  .right {
    .el-icon {
      margin-left: 20px;
    }
  }
}
</style>
